<div class="layui-upload">
  <button type="button" class="layui-btn" id="test2">多图片上传</button>
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
    预览图：
    <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">

    </div>
  </blockquote>
</div>
<style type="text/css">
  .uploader-list {
    margin-left: -15px;
  }

  .uploader-list .info {
    position: relative;
    margin-top: -25px;
    background-color: black;
    color: white;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.5;
    opacity: 0.5;
    width: 100px;
    height: 25px;
    text-align: center;
    display: none;
  }

  .uploader-list .handle {
    position: relative;
    background-color: black;
    color: white;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.5;
    opacity: 0.5;
    width: 100px;
    text-align: right;
    height: 18px;
    margin-bottom: -18px;
    display: none;
  }

  .uploader-list .handle span {
    margin-right: 5px;
  }

  .uploader-list .handle span:hover {
    cursor: pointer;
  }

  .uploader-list .file-iteme {
    margin: 12px 0 0 15px;
    padding: 1px;
    float: left;
  }
</style>

<script>
  upload.render({
    elem: '#test2'
    , url: ''
    , multiple: true
    , before: function (obj) {
      layer.msg('图片上传中...', {
        icon: 16,
        shade: 0.01,
        time: 0
      })
    }

    , done: function (res) {
      layer.close(layer.msg());//关闭上传提示窗口
      //上传完毕
      $('#uploader-list').append(
        '<div id="" class="file-iteme">' +
        '<div class="handle"><span class="glyphicon glyphicon-trash"></span></div>' +
        '<img style="width: 100px;height: 100px;" src=https://' + res.href + '>' +
        '<div class="info">' + res.name + '</div>' +
        '</div>'
      );
    }
  });
  upload.render({
    elem: '#test2'
    , url: ''
    , multiple: true
    , before: function (obj) {
      layer.msg('图片上传中...', {
        icon: 16,
        shade: 0.01,
        time: 0
      })
    }

    , done: function (res) {
      layer.close(layer.msg());//关闭上传提示窗口
      //上传完毕
      $('#uploader-list').append(
        '<div id="" class="file-iteme">' +
        '<div class="handle"><span class="glyphicon glyphicon-trash"></span></div>' +
        '<img style="width: 100px;height: 100px;" src=https://' + res.href + '>' +
        '<div class="info">' + res.name + '</div>' +
        '</div>'
      );
    }
  });


  $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
    if (event.type === "mouseenter") {
      //鼠标悬浮
      $(this).children(".info").fadeIn("fast");
      $(this).children(".handle").fadeIn("fast");
    } else if (event.type === "mouseleave") {
      //鼠标离开
      $(this).children(".info").hide();
      $(this).children(".handle").hide();
    }
  });
</script>